<template>
  <div class="information-delivery-style app-container v-flex">
    <!-- 顶部操作栏 -->
    <div class="top-operation">
      <filter-form
        :form="getDataListData"
        :has-default-operation="false">
        <el-date-picker
          v-model="getDataListData.startDate"
          type="date"
          placeholder="开始日期"
          :picker-options="pickerStartDate"
          style="margin-right: 10px;width: 152px;"
          size="mini" />
        <el-date-picker
          v-model="getDataListData.endDate"
          type="date"
          placeholder="结束日期"
          :picker-options="pickerEndDate"
          style="margin-right: 10px;width: 152px;"
          size="mini" />
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-search"
          @click="search">查询</el-button>
        <el-button
          class="refresh-btn"
          size="mini"
          type="primary"
          icon="el-icon-refresh"
          @click="refreshGetDataList">重置</el-button>
        <el-button
          v-permission-button="publicConfig['ITPS-ADD']"
          size="mini"
          class="operation-btn"
          type="primary"
          icon="el-icon-plus"
          @click="addData">新增</el-button>
      </filter-form>
    </div>
    <!-- 顶部操作栏 -->
    <br>
    <!-- 表格 -->
    <div ref="main" class="v-flex-elastic table-style">
      <base-table
        :height="height"
        :loading="tableLoading"
        :data="tableData.list"
        :columns="baseTableOption.columns"
        :show-index="baseTableOption.showIndex"
        :show-selection="baseTableOption.showSelection"
        :show-operation="baseTableOption.showOperation"
        :show-filter-column="baseTableOption.showFilterColumn"
        :operaton-width="baseTableOption.operatonWidth"
        :default-operations="baseTableOption.defaultOperations"
        :has-auth="baseTableOption.hasAuth"
        :row-show-color="baseTableOption.rowShowColor"
        @view="viewData"
        @deleteData="deleteData"
        @updateForm="updateForm" />
    </div>
    <!-- 表格 -->

    <!-- 分页 -->
    <div class="page-box">
      <pagination
        :total="tableData.total"
        :page.sync="getDataListData.page"
        :size.sync="getDataListData.size"
        @pagination="changePageOption" />
    </div>
    <!-- 分页 -->

    <!-- 新增/修改信息发布信息 -->
    <add-edit-warn
      :dialog="addEditDialog"
      :warn-type-arr="warnOptions"
      @updateData="addDataToTable" />
    <!-- 新增/修改信息发布信息 -->
  </div>
</template>
<script>
import { getDatatime } from '@/utils'
import { tableMixin } from '@/utils/public'
import { getWarnInformationTable, deleteData, getWarnType } from '@/api/cms/warn-information'
import AddEditWarn from './component/AddEditWarn'
export default {
  name: 'Index',
  components: {
    AddEditWarn
  },
  mixins: [tableMixin],
  data() {
    return {
      // 表格高度
      height: '100%',

      // loading
      tableLoading: false,

      // 时间区间选择
      pickerStartDate: this.handleStartDate(),
      pickerEndDate: this.handleEndDate(),

      // 查询列表请求参数
      getDataListData: {
        startDate: '',
        endDate: '',
        page: 1,
        size: 20
      },

      // 表格数组
      tableData: {
        list: [],
        total: 0
      },
      warnOptions: [],

      // baseTable组件配置
      baseTableOption: {
        columns: [
          { prop: 'warnTitle', label: '标题' },
          { prop: 'description', label: '简介' },
          { prop: 'createBy', label: '发布人' },
          { prop: 'createDatetime', label: '发布时间' }
        ],
        showIndex: true,
        showSelection: false,
        showOperation: true,
        showFilterColumn: true,
        operatonWidth: '100px',
        defaultOperations: ['view', 'edit', 'delete'],
        hasAuth: true,
        rowShowColor: { name: 'name', value: 0 }
      },

      // 新增/修改弹窗配置
      addEditDialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        type: '',
        editInfo: {},
        index: 0
      }
    }
  },
  mounted() {
    this.getWarnInformationTable()
    getWarnType().then(res => {
      this.warnOptions = res.data
    })
  },
  methods: {
    handleStartDate() { // 查询开始日期控制
      const self = this
      return {
        disabledDate(time) {
          if (self.getDataListData.endDate) {
            return new Date(self.getDataListData.endDate) < time.getTime()
          }
        }
      }
    },

    handleEndDate() { // 查询结束日期控制
      const self = this
      return {
        disabledDate(time) {
          if (self.getDataListData.startDate) {
            return new Date(self.getDataListData.startDate) > time.getTime()
          }
        }
      }
    },

    // 信息发布类型列表

    // 查询信息发布信息列表
    getWarnInformationTable() {
      this.tableLoading = true
      if (this.getDataListData.startDate && typeof (this.getDataListData.startDate) === 'object') {
        this.getDataListData.startDate = getDatatime(this.getDataListData.startDate, 0, 10)
      }
      if (this.getDataListData.endDate && typeof (this.getDataListData.endDate) === 'object') {
        this.getDataListData.endDate = getDatatime(this.getDataListData.endDate, 0, 10)
      }
      getWarnInformationTable(this.getDataListData).then(res => {
        this.tableLoading = false
        res.data.records.forEach(val => {
          val.createDatetime = getDatatime(new Date(val.createDatetime))
        })
        this.tableData = {
          list: res.data.records,
          total: res.data.total
        }

        console.log('cscscdcd', this.tableData.list)
      })
    },
    // 新增/修改信息发布信息
    // 删除信息发布信息

    // 改变分页配置
    changePageOption(data) {
      this.getDataListData.page = data.page
      this.getDataListData.size = data.size
      this.getWarnInformationTable() // 查询信息发布信息列表
    },

    // 搜索
    search() {
      this.getDataListData.page = 1
      this.getWarnInformationTable() // 查询信息发布信息列表
    },
    // 删除
    deleteData(row, $index) {
      this.confirmBox(`确定删除这条数据?`)
        .then(() => {
          deleteData(row.id).then(response => {
            this.notifiySuccess('删除成功!')
            this.getWarnInformationTable()
          })
        })
        .catch(() => {})
    },
    // 查看
    viewData(row, index) {
      this.addEditDialog.title = '查看通知公告'
      this.addEditDialog.visible = true
      this.addEditDialog.disabled = true
      this.addEditDialog.type = 'view'
      this.addEditDialog.editInfo = row
      this.addEditDialog.index = index
    },
    addData() {
      this.addEditDialog.title = '新增通知公告'
      this.addEditDialog.disabled = false
      this.addEditDialog.visible = true
      this.addEditDialog.type = 'add'
    },
    // 更新修改
    updateForm(row, index) {
      this.addEditDialog.title = '修改通知公告'
      this.addEditDialog.visible = true
      this.addEditDialog.disabled = false
      this.addEditDialog.type = 'edit'
      this.addEditDialog.editInfo = row
      this.addEditDialog.index = index
    },
    addDataToTable(res) {
      /** res.createDatetime = getDatatime(new Date(res.createDatetime))
       if (this.addEditDialog.type === 'add') {
        this.tableData.list.unshift(res)
        this.tableData.total++
      } else if (this.addEditDialog.type === 'edit') {
        this.$set(this.tableData.list, this.addEditDialog.index, res)
      }**/
      this.search()
      this.addEditDialog.visible = false
    },

    // 重置查询
    refreshGetDataList() {
      this.getDataListData = {
        startDate: '',
        endDate: '',
        page: 1,
        size: 20
      }
      this.getWarnInformationTable() // 查询信息发布信息列表
    }
  }
}
</script>

<style scoped>

</style>
